<template>
	<view class="container"
	 :style="{minHeight: systemInfo.windowHeight+'px'}">
	 <!-- 登录提示 -->
	 <zr-show-model />
		<view class="box-2">
			<view class="but" @click="getUserProfile">授权登录</view>
		</view>
	</view>
</template>
<script>
	import { sociallogin, getUserInfo } from "@/api/login.js"
	import { setToken } from '@/utils/auth'
	import encryption from '@/common/encryption.js'
	export default {
		data() {
			return {
				systemInfo: uni.getSystemInfoSync(),
				userInfo: {}
			}
		},
		computed: {
			currentDate() {
				// let date = new Date()
				// let hours = date.getHours()
				// if (hours >= 0 && hours < 11) return '凌晨好'
				// if (hours >= 11 && hours < 14) return '中午好'
				// if (hours >= 14 && hours < 18) return '下午好'
				// if (hours >= 18 && hours < 24) return '晚上好'
				// return '您好'
			}
		},
		onLoad() {
			console.log('11111')
			// uni.getStorage({
			//     key: 'socialLoginInfo',
			//     success: (res) => {
			//       if (res.data) {
			//         // 已登录，跳转到首页
			//         uni.navigateTo({
			//           url: '/pages/index/index'
			//         });
			//       }
			//     },
			//     fail: () => {
			//       // 没有登录状态，可以提示用户登录或者跳转到登录页面
			//       uni.navigateTo({
			//         url: '/pages/login/login'
			//       });
			//     }
			//   })
		},
		methods: {
			selectCk:function(e){
				this.namesel=e.detail.value
			},
			
			getUserProfile () {
				uni.showLoading({mask: true,title: '请稍后...'})
				uni.getUserProfile({
					desc: '用于完善会员资料',
					lang: 'zh_CN',
					success: (userRes) => {
						console.log(userRes.userInfo)
						this.userInfo = Object.assign(this.userInfo,userRes.userInfo)
						uni.login({
							provider: 'weixin',
							success: async (loginRes) => {
								console.log(loginRes.code)
								this.get_openID(loginRes.code)
							}
						})
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: '授权失败'
						})
					}
				})
			},
			// 获取openid
			async get_openID(code) {
				sociallogin(code).then(response => {
					// 记录用户信息
					// console.log('response.accessToken', response);
					// console.log("9090",response.data.accessToken);
					setToken(response.data.accessToken)
					
					this.$store.dispatch('NewGetInfo').then(res => {
					  this.$tab.reLaunch('/pages/index')
					})
					// commit('SET_TOKEN', response.data.accessToken)
					// console.log(2); 
					// resolve()  
					// this.quickLogin()
					// uni.setStorage({
					// 	key: 'socialLoginInfo',
					// 	data: {
					// 		accessToken: response.data.accessToken,
					// 		expiresTime: response.data.expiresTime,
					// 		openid: response.data.openid,
					// 		refreshToken: response.data.refreshToken,
					// 		userId: response.data.userId
					// 	},
					// 	success: (e)=>{
					// 		uni.hideLoading();
					// 		// this.$tab.reLaunch('/pages/index')
					// 		this.quickLogin(response.data)
					// 		// uni.navigateTo({ url: '/pages/index'})
					// 		// uni.navigateBack()
					// 	}
					// })
					// this.quickLogin(response.data)
				})
			},
			// async quickLogin() {
			// 	getUserInfo().then(response => {
			// 		commit('SET_NAME', response.data.nickname)
			// 		commit('SET_USERID', response.data.id)
					
			// 		// 记录用户信息
			// 		console.log('用户信息', response)
			// 	})
			// 		// let res = await this.$request({
			// 		// 	url: 'Login/quick_login',
			// 		// 	method: 'POST',
			// 		// 	data: {
			// 		// 		openid: this.userInfo.openId,
			// 		// 		heardimg: this.userInfo.avatarUrl,
			// 		// 		nickname: this.userInfo.nickName,
			// 		// 		source: this.source,
			// 		// 	}
			// 		// })
					
			// 		// uni.hideLoading();
			// 		// // 记录用户信息
			// 		// uni.setStorage({
			// 		// 	key: 'loginInfo',
			// 		// 	data: {
			// 		// 		token: res.token,
			// 		// 		usersig: res.usersig,
			// 		// 		user_id: res.user_id,
			// 		// 		userInfo: res.userInfo,
			// 		// 		timId: res.timId,
			// 		// 	},
			// 		// 	success: (e)=>{
			// 		// 		this.$common.getLoginInfo()
			// 		// 		uni.navigateBack()
			// 		// 	}
			// 		// })
			// }
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		width: 750rpx;
		padding-top: var(--status-bar-height);
		justify-content: space-between;
		box-sizing: border-box;
		.box-1 {
			margin-top: 70rpx;
			width: 420rpx;
			height: 440rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 180rpx 0 0 20rpx;
			.h1 {
				font-size: 80rpx;
				color: #333333;
			}
			.h2 {
				font-size: 48rpx;
				color: #333333;
			}
		}
		.box-2 {
			width: 750rpx;
			height: 690rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			padding: 310rpx 0 35rpx 0;
			justify-content: space-between;
			.but {
				width: 552rpx;
				height: 100rpx;
				background: #3F74FC;
				opacity: 1;
				border-radius: 45rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.password {
				font-size: 28rpx;
				font-weight: 400;
				color: #3F74FC;
				margin-bottom: 120rpx;
			}
			.appleSign {
				width: 550rpx;
				height: 90rpx;
				background-color: #FFFFFF;
				border: 1px solid #0C0C0C;
				margin: 20rpx;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #404657;
				font-size: 32rpx;
				color: #404657;
				.iconfont {
					font-size: 34rpx;
					margin-right: 8rpx;
				}
			}
			.quick {
				display: flex;
				align-items: center;
				width: 	670rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 60rpx;
				margin-top: 20rpx;
				.icon-weixin1 {
					height: 80rpx;
					width: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 50rpx;
					color: #09BA06;
					border: 1px solid #CCCCCC;
					background-color: #FFFFFF;
					border-radius: 50%;
				}
				// .text {
				// 	font-size: 24rpx;
				// 	font-weight: 400;
				// 	color: #999999;
				// 	margin-top: 20rpx ;
				// }
			}
			.protocol {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				.text {
					color: #3F74FC;
				}
			}
		}
	}
</style>

<!-- <template>
	<view class="login-bg">
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
		<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">欢迎登录</view>
		<view class="t-login">
 
			<form class="cl">
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/user.png"></image>
					<input type="number" name="phone" placeholder="请输入账号" maxlength="11" v-model="phone" />
				</view>
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
					<input type="password" name="code" maxlength="6" placeholder="请输入密码" v-model="pwd" />
				</view>
				<button @tap="login()">登 录</button>
			</form>
			<view class="t-f">
				<span :style="{width:width+'px'}"></span>
				<text class="qt"> 其他登录方式 </text>
				<span :style="{width:width+'px'}"></span>
			</view>
			<view class="t-e cl">
				<view class="t-g" @tap="wxLogin()">
					<image src="https://zhoukaiwen.com/img/loginImg/wx2.png"></image>
				</view>
				<view class="t-g" @tap="zfbLogin()">
					<image src="https://zhoukaiwen.com/img/loginImg/qq2.png"></image>
				</view>
				<view class="t-g" @tap="zfbLogin()">
					<image src="https://zhoukaiwen.com/img/loginImg/wb.png"></image>
				</view>
			</view>
		</view>
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'xx工具箱！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				phone: '', //手机号码
				pwd: '', //密码
				width: ''
			};
		},
		onLoad() {
			setTimeout(() => {
				let query = uni.createSelectorQuery();
				query.select('.qt').boundingClientRect()
				query.select('.t-f').boundingClientRect()
				query.exec((res) => {
					console.log("res[0]", res[0]);
					console.log("res[1]", res[1])
					this.width = ((res[1].width - res[0].width) / 2) - 15
				})
			}, 200)
		},
		methods: {
			wxLogin() {
			},
			zfbLogin() {
				
			},
			//当前登录按钮操作
			login() {
				var that = this;
				if (!that.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				if (!that.pwd) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				uni.showToast({
					title: '登录成功！',
					icon: 'none'
				});
			},
			//立刻注册
			reg() {
				uni.showToast({
					title: '注册账号',
					icon: 'none'
				});
			}
		}
	};
</script>
<style scoped>
	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
		z-index: -1;
	}
 
	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		z-index: -1;
	}
 
	.login-bg {
		max-width: 750px;
		width: 100vw;
		min-height: 100vh;
	}
 
	.t-b {
		text-indent: 60rpx;
		font-size: 46rpx;
		color: #000;
		padding: 200rpx 0 30rpx 0;
		font-weight: bold;
	}
 
	.t-b2 {
		text-indent: 60rpx;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 60rpx 0;
	}
 
	.t-login {
		width: 80%;
		/* padding: 55rpx; */
		margin: 0rpx auto 0 auto;
		font-size: 28rpx;
		z-index: 9;
	}
 
	.t-login button {
		font-size: 28rpx;
		background: linear-gradient(to right, #5677fc, hsla(217 100% 56% / 1));
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
	}
 
	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f6f6f6;
		border: 1px solid #f6f6f6;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
 
	.t-login .t-a {
		position: relative;
	}
 
	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
	}
 
	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 120rpx 0;
		font-weight: bold;
	}
 
	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}
 
	.t-login .t-c {
		display: flex;
		justify-content: space-evenly;
		color: #666666;
		margin: 30rpx 30rpx 40rpx 0;
	}
 
	.t-login .t-c .t-c-txt {
		margin-right: 300rpx;
	}
 
	.t-login .t-e {
		text-align: center;
		width: 80%;
		margin: 40rpx auto 0;
	}
 
	.t-login .t-g {
		float: left;
		width: 33.33%;
	}
 
	.t-login .t-e image {
		width: 70rpx;
		height: 70rpx;
	}
 
	.t-login .t-f {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 80rpx 0 0 0;
		color: #999;
		position: relative;
	}
 
	.t-login .t-f text {
		color: #b9b9b9;
		font-size: 27rpx;
	}
 
	.t-login .t-f span {
		display: block;
		background-color: #000;
		width: auto;
		height: 1.5rpx;
	}
 
	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}
 
	.cl {
		zoom: 1;
	}
 
	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style> -->